<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            display: flex;
            background-color: #ddd;
            width: 500px;
            height: 300px;
            outline: 5px solid yellow;
        }

        .left-side {
            background-color: red;
            flex: 0.1 0 100px
        }

        .content {
            flex: 0.2 0 120px;
            max-width: 130px;
        }

        .right-side {
            background-color: blue;
            flex: 0.3 0 160px;
        }

        /*
          当子项目的flex-grow总和<1时

          sum = 0.1 + 0.2 + 0.3 = 0.6;

          剩余宽度 = 500px - 100px - 120px - 160px =  120px

          因为flex-grow总和大于<1时，因此并不是子项目要完全扩展120px 而是 120px * （0.1+0.2+0.3） = 72px，即扩展60%

          分配的剩余宽度：
          left：72 * 0.1/0.6 （sum） = 12px
          content: 72 * 0.2/0.6 = 24px
          right: 72 * 0.3/0.6 = 36px

          未分配的剩余宽度：120px - 72px = 48px;

          最终宽度：

          left：100px + 12px = 112px
          content：120px + 24px = 144px
          right：160px + 36px = 196px

           注意：flex-grow 会受到 max-width 的影响。如果最终 grow 后的元素的宽度结果大于 max-width 指定的值，max-width 的值将会优先使用。
           这样同样也会导致父元素有部分剩余空间没有分配。
        */
    </style>
</head>
<body>
<section>
    <div class="left-side">left-side</div>
    <div class="content">content</div>
    <div class="right-side">right-side</div>
</section>
</body>
</html>
